<!--renshuai-->
<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="" prop="orderId">
        <el-input
          v-model="queryParams.orderId"
          placeholder="工单编号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="" prop="producerName">
        <el-input
            v-model="queryParams.producerName"
            placeholder="厂商名称"
            clearable
            @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="" prop="cusContactNo">
        <el-input style="width: 140px"
          v-model="queryParams.cusContactNo"
          placeholder="客户手机号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="" prop="cusContactNo">
        <el-input style="width: 140px"
                  v-model="queryParams.workerName"
                  placeholder="师傅姓名"
                  clearable
                  @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="" prop="projName">
        <el-select v-model="queryParams.projName" placeholder="服务类型" clearable style="width: 120px">
            <el-option v-for="(item ,index) in projList" :key="item.projCode" :label="item.projName" :value="item.projName"/>
        </el-select>
      </el-form-item>
      <el-form-item label="" prop="cateItem">
        <el-cascader
            v-model="cateItemValues"
            :options="cateOptions"
            @change="handleChangeCate" clearable placeholder="服务产品"></el-cascader>
      </el-form-item>
      <el-form-item label="" prop="workStatus">
        <el-select v-model="queryParams.workStatus" placeholder="工单状态" clearable>
          <el-option  v-for="(item,index) in workStatusList" :key="item.value" :label="item.label" :value="item.value"/>
        </el-select>
      </el-form-item>

      <el-form-item label="">
        <el-date-picker
            v-model="dateRange"
            style="width: 240px"
            value-format="yyyy-MM-dd"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="handleChangeDate"
        ></el-date-picker>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery"
                   :loading="loading">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['wkorder:list:add']"
        >新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
            type="primary"
            plain
            icon="el-icon-download"
            size="mini"
            @click="handleExport"
            v-hasPermi="['wkorder:list:export']"
        >导出</el-button>
      </el-col>

<!--      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>-->

      <el-col :span="1.5" style="float:right" v-for="(item,index) in workStatusStstcList" >
        <el-badge :value="item.orderNum">
<!--          <el-tag type="danger">{{item.workStatusName}}</el-tag>-->
<!--          <dict-tag :options="workStatusList" :value="item.workStatus"/>-->
          <el-button size="mini" round>{{item.workStatusName}}</el-button>
        </el-badge>
      </el-col>
    </el-row>

    <el-table v-loading="loading" :data="orderList" @selection-change="handleSelectionChange"
              height="calc(100vh - 320px)" max-height="calc(100vh - 320px)">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="下单时间" align="center" prop="createTime" width="95"></el-table-column>
      <el-table-column label="初始编号" align="center" prop="pkId" />
      <el-table-column label="工单编号" align="center" prop="pkId" width="100"/>
      <el-table-column label="业主信息" align="center" prop="cusName" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          {{scope.row.cusName}}({{scope.row.cusContactNo}})
        </template>
      </el-table-column>
      <el-table-column label="主诉人信息" align="center" prop="cusName" :show-overflow-tooltip="true"/>
      <el-table-column label="主诉人电话沟通" align="center" prop="pkId" />
      <el-table-column label="主诉人投诉" align="center" prop="pkId" />
      <el-table-column label="小区" align="center" prop="pkId" />
      <el-table-column label="业主地址" align="center" prop="pkId" />
      <el-table-column label="工单来源" align="center" prop="pkId" />
      <el-table-column label="工单类型(一级)" align="center" prop="pkId" />
      <el-table-column label="工单类型(二级)" align="center" prop="pkId" />
      <el-table-column label="工单类型(三级)" align="center" prop="pkId" />
      <el-table-column label="截止时间" align="center" prop="pkId" />
      <el-table-column label="工单问题" align="center" prop="pkId" />
      <el-table-column label="问题照片" align="center" prop="pkId" />
      <el-table-column label="发起账号" align="center" prop="pkId" />
      <el-table-column label="所属公司" align="center" prop="pkId" />
      <el-table-column label="站名/维检所" align="center" prop="pkId" />
      <el-table-column label="站号" align="center" prop="pkId" />
      <el-table-column label="站员" align="center" prop="pkId" />
      <el-table-column label="站点联系人" align="center" prop="pkId" />
      <el-table-column label="申请延期" align="center" prop="pkId" />
      <el-table-column label="回访" align="center" prop="pkId" />
      <el-table-column label="三供一业" align="center" prop="pkId" />
      <el-table-column label="工单状态" align="center" prop="workStatus" width="90">
        <template slot-scope="scope">
          <dict-tag :options="workStatusList" :value="scope.row.workStatus"/>
        </template>
      </el-table-column>

     <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right">
        <template slot-scope="scope">
          <el-button
              type="text"
              size="small"
              icon="el-icon-view"
              @click="handlePreview(scope.row)"
              v-hasPermi="['wkorder:list:preview']">详情</el-button>
          <el-dropdown size="mini" @command="(command) => handleCommand(command, scope.row)"
                       v-if=" (scope.row.workStatus=='1'
                       || scope.row.workStatus=='2'
                       || scope.row.workStatus=='21'
                       || scope.row.workStatus=='3'
                       || scope.row.workStatus=='9'
                       || scope.row.workStatus=='4'
                       || scope.row.workStatus=='11')
                       &&(scope.row.settlemStatus=='0')"
                       v-hasPermi="['wkorder:list:edit']">
            <el-button size="mini" type="text" icon="el-icon-d-arrow-right">更多</el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="handleUpdate" icon="el-icon-edit-outline"
                                v-if=" scope.row.workStatus=='1'
                                || scope.row.workStatus=='9'
                                || scope.row.workStatus=='11'"
                                v-hasPermi="['wkorder:list:edit']">修改工单</el-dropdown-item>
              <el-dropdown-item command="handleItem" icon="el-icon-money"
                                v-if=" /*scope.row.workStatus!='4' &&*/ scope.row.workStatus!='0' && scope.row.settlemStatus=='0'"
                                v-hasPermi="['wkorder:list:editItem']">调整价格</el-dropdown-item>
              <el-dropdown-item command="openSelectWorker" icon="el-icon-user"
                                v-if=" scope.row.workStatus=='9'
                                || scope.row.workStatus=='1'
                                || scope.row.workStatus=='3'
                                ||scope.row.workStatus=='11'"
                                v-hasPermi="['wkorder:list:assignWorker']">安排师傅</el-dropdown-item>
              <el-dropdown-item command="handlePfmRemark" icon="el-icon-document-add"
                                v-if=" scope.row.workStatus!='4' && scope.row.workStatus!='0'"
                                v-hasPermi="['wkorder:list:updatePfmRemark']">平台备注</el-dropdown-item>
              <el-dropdown-item command="handleClose" icon="el-icon-close"
                                v-if=" (scope.row.workStatus=='9'
                                || scope.row.workStatus=='3'
                                || scope.row.workStatus=='1'
                                || scope.row.workStatus=='11'
                                || scope.row.workStatus=='4')
                                &&(scope.row.settlemStatus=='0')"
                                v-hasPermi="['wkorder:list:close']">关闭工单</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
<!--          <el-button
              v-if=" scope.row.workStatus=='9' || scope.row.workStatus=='1'"
              type="text"
              size="small"
              icon="el-icon-plus"
              @click="openSelectWorker(scope.row)"
              v-hasPermi="['wkorder:list:assignWorker']"
          >安排师傅</el-button>-->
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改话框 -->
    <el-dialog :title="title" :visible.sync="open" width="780px" append-to-body center :before-close="handleCancel">
      <el-form ref="form" :model="form" :rules="rules" label-width="100px"  :class=" !openIsEdit?'noEidt':'' " v-loading="submitLoading">
        <el-input v-model="form.pkId" :readonly="true" type="hidden"/>

<!--        <el-row>
          <el-col :span="12">
            <el-form-item label="工单编号:" prop="pkId">
              <span>{{form.pkId}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12" >
            <el-form-item label="工单状态:" prop="workStatus">
              <dict-tag :options="workStatusList" :value="form.workStatus"/>
            </el-form-item>
          </el-col>
          <el-col :span="24" >
            <el-form-item label="工单来源:" prop="workOrigin">
              <el-select v-model="form.workOrigin" placeholder=""
                          clearable
                         :disabled="!openIsEdit" >
                <el-option v-for="(item ,index) in workOriginList"
                           :key="item.key"
                           :label="item.value"
                           :value="item.key"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>-->


        <el-row :gutter="5">
          <el-col :span="24" >
            <el-form-item label="业主信息" class="group-title"></el-form-item>
          </el-col>
          <el-col :span="24" >
            <el-container>
              <el-main class="grop-item-main">
                <el-col :span="12">
                  <el-form-item label="业主姓名:" prop="cusName">
                    <el-input v-model="form.cusName" :readonly="!openIsEdit"/>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="性别" prop="cusGender">
                    <template v-if="openIsEdit">
                      <el-radio v-model="form.cusGender" label="1">先生</el-radio>
                      <el-radio v-model="form.cusGender" label="2">女士</el-radio>
                    </template>
                    <template v-if="!openIsEdit">
                      <span v-if="form.cusGender==1">先生</span>
                      <span v-else>女士</span>
                    </template>
                  </el-form-item>
                </el-col>

                <el-col :span="24">
                  <el-form-item label="联系电话" prop="cusContactNo">
                    <el-input v-model="form.cusContactNo" :readonly="!openIsEdit"/>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="业主地址" prop="cusAddress">
                    <el-col :span="11">
                      <el-cascader style="width: 100%"
                                   :key="refreshDistrict"
                                   ref="fromDistrictOptions"
                                   v-model="form.districtValues"
                                   :options="districtOptions"
                                   :disabled="!openIsEdit"
                                   clearable filterable
                                   @change="handleFromChangeDistrict"
                      ></el-cascader>
                    </el-col>
                    <el-col :span="13"><el-input v-model="form.cusAddress" :readonly="!openIsEdit"/></el-col>
                  </el-form-item>
                </el-col>
              </el-main>
            </el-container>
          </el-col>

        </el-row>
        <el-row :gutter="5">
          <el-col :span="24" >
            <el-form-item label="主诉人信息" class="group-title"></el-form-item>
          </el-col>
          <el-col :span="24" >
            <el-container>
              <el-main class="grop-item-main">
                <el-col :span="12">
                  <el-form-item label="主诉人姓名:" prop="cusName">
                    <el-input v-model="form.cusName" :readonly="!openIsEdit"/>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="性别" prop="cusGender">
                    <template v-if="openIsEdit">
                      <el-radio v-model="form.cusGender" label="1">先生</el-radio>
                      <el-radio v-model="form.cusGender" label="2">女士</el-radio>
                    </template>
                    <template v-if="!openIsEdit">
                      <span v-if="form.cusGender==1">先生</span>
                      <span v-else>女士</span>
                    </template>
                  </el-form-item>
                </el-col>

                <el-col :span="24">
                  <el-form-item label="主诉人电话" prop="cusContactNo">
                    <el-input v-model="form.cusContactNo" :readonly="!openIsEdit"/>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="主诉人其他" prop="cusAddress">
                    <el-col :span="11">
                      <el-input v-model="form.cusAddress" :readonly="!openIsEdit" placeholder="电话沟通次数"/>
                    </el-col>
                    <el-col :span="13">
                      <el-input v-model="form.cusAddress" :readonly="!openIsEdit" placeholder="投诉次数"/>
                    </el-col>
                  </el-form-item>
                </el-col>
              </el-main>
            </el-container>
          </el-col>

        </el-row>

        <el-row :gutter="5">
          <el-col :span="24" >
            <el-form-item label="服务信息" class="group-title"></el-form-item>
          </el-col>
          <el-col :span="24" >
            <el-container>
              <el-main class="grop-item-main">
                <el-col :span="24" >
                  <el-form-item label="工单来源:" prop="workOrigin">
                    <el-select v-model="form.workOrigin" placeholder=""
                               clearable
                               :disabled="!openIsEdit" >
                      <el-option v-for="(item ,index) in workOriginList"
                                 :key="item.key"
                                 :label="item.value"
                                 :value="item.key"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>

                <el-col :span="24">
                  <el-form-item label="工单类型" prop="projCateItemCode">
                    <el-cascader style="width:100%"
                                 :key="refreshProjCateItem"
                                 ref="fromProjOptions"
                                 v-model="form.projValuesAry"
                                 :options="projOptions"
                                 :disabled="!openIsEdit"
                                 @change="handleChangeProjAry" clearable filterable  placeholder="产品类型"></el-cascader>
                  </el-form-item>
                </el-col>

                <el-col :span="24">
                  <el-form-item label="工单问题" prop="producerRemark">
                    <el-input v-model="form.producerRemark" :readonly="!openIsEdit"/>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="平台备注" prop="platformRemark">
                    <el-input v-model="form.platformRemark" :readonly="!openIsEdit"/>
                  </el-form-item>
                </el-col>
              </el-main>
            </el-container>
          </el-col>
        </el-row>

        <el-row :gutter="5">
          <el-col :span="24" >
            <el-form-item label="工单备注" class="group-title"></el-form-item>
          </el-col>
          <el-col :span="24" >
            <el-container>
              <el-main class="grop-item-main">
                <el-col :span="24" >
                  <el-form-item label="是否回访" prop="workOrigin">
                    <template v-if="openIsEdit">
                      <el-radio v-model="form.cusGender" label="1">先生</el-radio>
                      <el-radio v-model="form.cusGender" label="2">女士</el-radio>
                    </template>
                    <template v-if="!openIsEdit">
                      <span v-if="form.cusGender==1">先生</span>
                      <span v-else>女士</span>
                    </template>
                  </el-form-item>
                </el-col>
              </el-main>
            </el-container>
          </el-col>
        </el-row>

        <el-row :gutter="5">
          <el-col :span="24" >
            <el-form-item label="分配工单" class="group-title"></el-form-item>
          </el-col>
          <el-col :span="24" >
            <el-container>
              <el-main class="grop-item-main">
                <el-col :span="24" >
                  <el-form-item label="接单部门:" prop="workOrigin">
                    <el-select v-model="form.workOrigin" placeholder=""
                               clearable
                               :disabled="!openIsEdit" >
                      <el-option v-for="(item ,index) in workOriginList"
                                 :key="item.key"
                                 :label="item.value"
                                 :value="item.key"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-main>
            </el-container>
          </el-col>
        </el-row>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button v-if="openIsEdit" type="primary" @click="onSubmit()" :loading="submitLoading">提 交</el-button>
        <el-button @click="handleCancel">关 闭</el-button>
      </div>
    </el-dialog>

    <select-worker ref="select" bizId="" @ok="handleQuery" />

  </div>
</template>

<script>
import {listPdr} from "@/api/producer/pdr.js";
import {listProjAct} from "@/api/cms/prod/proj.js";
import {cateOptionsSelect, projOptionsSelect} from "@/api/cms/prod/cate.js";
import {
  getOrderById,
  getOrderFbByOrderId,
  listOrder,
  listOrderFlowByOrderId,
  updateWkOrder,
  closeWkOrderByOrderId,
  updatePfmRemark
} from "@/api/wkorder/wkorder.js";
import {districtOptionSelect} from "@/api/cms/district/district";
import selectWorker from "../selectWorker";
import "@/style/customer.scss";
import {uploadFile} from "@/api/upload";
import {getSystem, getToken} from "@/utils/auth";
import {dataSettlemStatusList, dataWorkStatusList} from "@/api/data/data";
import {getPfmStatusByWorkStatus} from "@/api/wkorder/ststc";

export default {
  name: "Wkorder_list_bak", //此name需要和func表的func_path匹配，否则再次回到已打开的此页面时，会触发页面刷新（如：页签切换）
  components: { selectWorker },
  data() {
    return {
      uploadAction:uploadFile,
      headers: {
        // Authorization: "Bearer " + getToken()
        'access-token': getToken(), // 让每个请求携带自定义token 请根据实际情况自行修改
        'system-key': getSystem()
      },
      fileList:[],
      imageUploading:false,//图片是否上传中
      imageUploadPercent:0,//图片上传百分比
      projList:"",
      orderStateList:[
          {
            key:"101",
            value:"完成安装"
          },
          {
            key:"102",
            value:"完成维修"
          },
          {
            key:"103",
            value:"完成拆旧"
          },
          {
            key:"104",
            value:"完成安装/维修"
          },
          {
            key:"105",
            value:"完成安装/拆旧"
          },
          {
            key:"106",
            value:"完成安装/维修/拆旧"
          },
          {
            key:"201",
            value:"联系不上客户"
          },
          {
            key:"202",
            value:"空跑、未处理"
          },
          {
            key:"203",
            value:"空跑、缺配件"
          },
      ],
      cateItemValues:[],
      cateOptions: [
          // {
          //   value: 'zhinan',
          //   label: '指南',
          //   children: [{
          //     value: 'shejiyuanze',
          //     label: '设计原则',
          //   }]
          // }
      ],
      projOptions:[],
      refreshProjCateItem: 0,//重新渲染组件,解决通过修改进入，清空后再次选择原值，无法选择的问题
      workStatusList:dataWorkStatusList,
      settlemStatusList:dataSettlemStatusList,
      workOriginList:[
        {
          key:"11",
          value:"天猫"
        },
        {
          key:"12",
          value:"淘宝"
        },
        {
          key:"13",
          value:"京东"
        },
        {
          key:"14",
          value:"抖音"
        },
        {
          key:"15",
          value:"拼多多"
        },
        {
          key:"21",
          value:"400"
        },
        {
          key:"99",
          value:"其他"
        },
      ],
      districtOptions:[],
      refreshDistrict:0,
      pdrList:"",
      pdrOptionsLoading: false,// 厂商下拉操作加载
      pdrOptionsPage:{
        pagerCount:5,//按钮数，超过时会折叠
        total:0 //总条数
      },
      pdrOptionsQueryParams: {
        companyNameComp:"like",
        companyName: undefined,
        /*auditStatus:1,*/
        pageSize: 5,
        pageNum: 1
      },
      dateRange:"",
      activeCIName: ['1'],//激活的折叠面板的name值
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 表格数据
      orderList: [],
      workStatusStstcList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      //是否打开编辑
      openIsEdit:false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        cusContactNoComp:"like",
        cusContactNo: undefined,
        workerName: undefined,
        orderIdComp:"like",
        orderId: undefined,
        producerNameComp:"like",
        producerName:undefined,
        projName:undefined,
        cateName:undefined,
        cateItemCode:undefined,
        startDate:undefined,
        endDate:undefined
      },
      // 表单参数
      form: {
        cateItemValues:[],
        districtValues:[],
        projValuesAry:[],
        urgentStatus:0,
        prodNum:undefined,
        workPrice:undefined
      },
      projItemPrice:undefined,
      submitLoading:false,

      orderFbForm:{

      },
      orderFlowList:{

      },
      // 表单校验
      rules: {
        cusName:  [
          {
            validator:(rule, value, callback)=>{
              if(!value){
                callback(new Error("客户姓名不能为空"))
                this.$notify.error({
                  title: '错误',
                  message: '客户姓名不能为空'
                });
              }else{
                callback(); //成功后不传入错误参数即可
              }
            }, trigger: "blur",required: true }
        ],
        cusContactNo:  [
          {
            validator:(rule, value, callback)=>{
              if(value ===""){
                let tip="客户联系电话不能为空"
                callback(new Error(tip))
                this.$notify.error({
                  title: '错误',
                  message: tip
                });
              }else{
                callback(); //成功后不传入错误参数即可
              }
            }, trigger: "blur",required: true }
        ],
        cusAddress:  [
          {
            validator:(rule, value, callback)=>{

              if(value ==="" || (!this.form.districtValues || this.form.districtValues.length<=0)){
                let tip="客户地址不能为空"
                callback(new Error(tip))
                this.$notify.error({
                  title: '错误',
                  message: tip
                });
              }else{
                callback(); //成功后不传入错误参数即可
              }
            }, trigger: "blur" ,required: true}
        ],
        producerName:  [
          {
            validator:(rule, value, callback)=>{
              if(value ===""){
                let tip="厂商名称不能为空"
                callback(new Error(tip))
                this.$notify.error({
                  title: '错误',
                  message: tip
                });
              }else{
                callback(); //成功后不传入错误参数即可
              }
            }, trigger: "blur",required: true }
        ],
        /*projCode:  [
          {
            validator:(rule, value, callback)=>{
              if(value ===""){
                let tip="配置类型不能为空"
                callback(new Error(tip))
                this.$notify.error({
                  title: '错误',
                  message: tip
                });
              }else{
                callback(); //成功后不传入错误参数即可
              }
            }, trigger: "blur" ,required: true}
        ],*/
        /*cateItemCode:  [
          {
            validator:(rule, value, callback)=>{
              if(!value){
                let tip="服务产品不能为空"
                callback(new Error(tip))
                this.$notify.error({
                  title: '错误',
                  message: tip
                });
              }else{
                callback(); //成功后不传入错误参数即可
              }
            }, trigger: "blur",required: true }
        ],*/
        projCateItemCode:  [
          {
            validator:(rule, value, callback)=>{
              if(!this.form.projValuesAry||this.form.projValuesAry.length<=0){
                let tip="产品类型不能为空"
                callback(new Error(tip))
                this.$notify.error({
                  title: '错误',
                  message: tip
                });
              }else{
                callback(); //成功后不传入错误参数即可
              }
            }, trigger: "blur",required: true }
        ],
        workPrice:  [
          {
            validator:(rule, value, callback)=>{
              if(value ===""){
                let tip="工单价格不能为空"
                callback(new Error(tip))
                this.$notify.error({
                  title: '错误',
                  message: tip
                });
              }else{
                callback(); //成功后不传入错误参数即可
              }
            }, trigger: "blur" ,required: true}
        ],
        prodNum:  [
          {
            validator:(rule, value, callback)=>{
              if(value ===""){
                let tip="产品数量不能为空"
                callback(new Error(tip))
                this.$notify.error({
                  title: '错误',
                  message: tip
                });
              }else{
                callback(); //成功后不传入错误参数即可
              }
            }, trigger: "blur" ,required: true}
        ],
        prodImg:  [
          {
            validator:(rule, value, callback)=>{
              if(!value){
                let tip="产品图片不能为空"
                callback(new Error(tip))
                this.$notify.error({
                  title: '错误',
                  message: tip
                });
              }else{
                callback(); //成功后不传入错误参数即可
              }
            }, trigger: "blur" }
        ],
      },
      rulesItem:{
        itemName:[
          {
            validator:(rule, value, callback)=>{
              if(!value){
                callback(new Error("费用名称不能为空"))
                this.$notify.error({
                  title: '错误',
                  message: '费用名称不能为空'
                });
              }else{
                callback(); //成功后不传入错误参数即可
              }
            }, trigger: "blur",required: true }
        ],
        itemPrice: [
          {
            validator:(rule, value, callback)=>{
              if(!value && value!=0){
                callback(new Error("工单价格不能为空"))
                this.$notify.error({
                  title: '错误',
                  message: '工单价格不能为空'
                });
              }else{
                callback(); //成功后不传入错误参数即可
              }
            }, trigger: "blur",required: true }
        ],
        itemFee:[
          {
            validator:(rule, value, callback)=>{
              if(!value && value!=0){
                callback(new Error("师傅报酬不能为空"))
                this.$notify.error({
                  title: '错误',
                  message: '师傅报酬不能为空'
                });
              }else{
                callback(); //成功后不传入错误参数即可
              }
            }, trigger: "blur",required: true }
        ]
      }
    };
  },
  created() {
    this.getProjList();
    this.getCateList();
    this.getProjOptions();
    this.getList();
    this.getDistrictOptions();
  },
  methods: {
    /**
     * 查询服务项目
     */
    getProjList(){
      listProjAct().then(response =>{
        this.projList=response.data;
      });
    },
    /**
     * 查询服务项目类目
     */
    getCateList(){
      cateOptionsSelect().then(data => {
        this.cateOptions = data
      });
    },
    getProjOptions(){
      projOptionsSelect().then(data => {
        this.projOptions = data
      });
    },
    getDistrictOptions(){
      districtOptionSelect().then( response => {
        this.districtOptions = response;
      });
    },
    /**
     * 查询厂商
     * @param query
     */
    getPdrList(){
      this.pdrOptionsLoading = true;
      listPdr(this.pdrOptionsQueryParams).then(response => {
        this.pdrList = response.data;
        this.pdrOptionsPage.total = Number(response.total);
        this.pdrOptionsLoading = false;
      });
    },
    handlePdrOptionsList(query){
      if (query !== ''){
        this.pdrOptionsQueryParams.pageNum=1
        this.pdrOptionsQueryParams.companyName = query;
        this.getPdrList();
      }
    },
    //此处的pageNum是页码
    handlePdrOptionsPage(pageNum){
      this.pdrOptionsQueryParams.pageNum = pageNum;
      this.getPdrList();
    },


    /**
     * 服务产品改变时候触发
     * @param value
     */
    handleChangeCate(value){
      this.cateItemValues=value;
      if(value){
        this.queryParams.cateItemCode=value[1];
      }
    },
    /**
     * 日期改变触发
     * @param value
     */
    handleChangeDate(value){
      console.log("====",value);
      if(value){
        this.queryParams.startDate=value[0];
        this.queryParams.endDate=value[1];
      }else{
        this.queryParams.startDate=undefined;
        this.queryParams.endDate=undefined;
      }
    },
    /** 查询列表 */
    getList() {
      this.loading = true;
      listOrder(this.queryParams).then(response => {
        this.orderList = response.data;
        this.total = Number(response.total);
        //this.loading = false;
      }).finally(()=>{
        this.loading = false;
        //放在list查询之后，防止并发执行
        this.getPfmStatusByWorkStatus();

      });


    },

    //查询状态数据
    getPfmStatusByWorkStatus(){
      let queryStatus={
        workStatusList:"3,9,11"
      }
      this.workStatusStstcList=[];
      getPfmStatusByWorkStatus(queryStatus).then(response =>{
        this.workStatusStstcList=response.data;
      });
    },

    handleExport(){
      this.download('wbzj-biz/wkOrder/exportWkOrder', {
        ...this.queryParams
      }, `工单_${new Date().getTime()}.xlsx`)
      // exportPdrSettlemSmryList(this.queryParams).then(response => {
      //   debugger;
      // })
    },

    onSubmit(){
      this.$confirm('确认提交吗？')
          .then(_ => {
            this.$refs["form"].validate( valid => {
              if (!valid){
                return;
              }
              let order = {
                pkId: this.form.pkId,
                prodImg:this.form.prodImg,
                workPrice:this.form.workPrice,
                workStatus:this.form.workStatus,
                urgentStatus:this.form.urgentStatus,
                urgentPrice:this.form.urgentPrice,
                urgentFee:this.form.urgentFee,
                projCode:this.form.projCode,
                projName:this.form.projName,
                cateCode:this.form.cateCode,
                cateName:this.form.cateName,
                cateItemCode:this.form.cateItemCode,
                cateItemName:this.form.cateItemName,
                prodNum:this.form.prodNum,
                workOrigin:this.form.workOrigin,
                producerId:this.form.producerId,
                producerName:this.form.producerName,
                producerRemark:this.form.producerRemark,
                platformRemark:this.form.platformRemark
              }
              let customer = {
                name: this.form.cusName,
                gender: this.form.cusGender,
                contactNo: this.form.cusContactNo,
                province: this.form.cusProvince,
                city: this.form.cusCity,
                district: this.form.cusDistrict?this.form.cusDistrict:'',
                provinceCode: this.form.cusProvinceCode,
                cityCode: this.form.cusCityCode,
                districtCode: this.form.cusDistrictCode?this.form.cusDistrictCode:"",
                address:this.form.cusAddress
              }
              let data = {
                order:order,
                customer:customer
              }
              this.submitLoading=true;
              updateWkOrder(data).then(response => {
                this.$alert("操作成功");
                this.handleCancel();
                this.handleQuery();
              }).finally(() =>{
                this.submitLoading=false;
              });
            })


          })
          .catch(_ => {});
    },

    // 取消按钮
    handleCancel() {
      this.open = false;
      this.reset();
    },

    // 表单重置
    reset() {
      this.form = {
        prodImg:undefined,
        cateItemValues:[],
        districtValues:[],
        projValuesAry:[],
        urgentStatus:0,
        prodNum:undefined,
        workPrice:undefined
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.noticeId)
      this.single = selection.length!=1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.openIsEdit=true;
      this.title = "新增";
    },

    /**
     * 获取form数据
     * @param row
     */
    getFormData(row){
      const pkId=row.pkId;
      let query={"orderId":pkId};
      getOrderById(query).then(response => {
        this.form = response.data;
        this.form.cateItemValues=[this.form.cateCode,this.form.cateItemCode]
        this.form.projValuesAry=[this.form.projCode,this.form.cateCode,this.form.cateItemCode]
        this.open = true;
        this.title = "工单信息";

        if(this.form.cusDistrictCode){
          this.form.districtValues=[this.form.cusProvinceCode,this.form.cusCityCode,this.form.cusDistrictCode]
        }else{
          this.form.districtValues=[this.form.cusProvinceCode,this.form.cusCityCode]
        }


        //查询工单反馈
        getOrderFbByOrderId(query).then(response =>{
          if(response.data){
            this.orderFbForm=response.data
          }else{
            this.orderFbForm={}
          }

        });

        //工单进度
        listOrderFlowByOrderId(query).then(response =>{
          if(response.data){
            this.orderFlowList=response.data;
          }
        })


        this.handlePdrOptionsList(this.form.producerName)

      });
    },
    /**
     * 详情按钮
     * @param row
     */
    handlePreview(row){
      this.openIsEdit=false;
      this.getFormData(row);
    },

    handleUpdate(row){
      this.openIsEdit=true;
      //this.handlePreview(row);
      this.getFormData(row);
    },


    renderItemHeader(){
      return (
          <div>
            <span>操作</span>
            <el-button style="margin-left:5px;padding-left:5px;padding-right:5px"
                       type="primary"
                       plain
                       icon="el-icon-plus"
                       class="table-icon"
                       size="mini"
                       onClick={() => this.handleAddItemRow()}
            >新增</el-button>
          </div>
      );
    },


    handlePfmRemark(row){
      this.$prompt('请输入平台备注', '平台备注', {
        confirmButtonText: '提交',
        cancelButtonText: '关闭',
        inputType:'textarea',
        inputValue: row.platformRemark
      }).then(({ value }) => {
        if(row.platformRemark===value){
          this.$message({
            type: 'info',
            message: '数据未发生改变'
          });
          return;
        }
        let data={
          orderId:row.pkId,
          platformRemark:value
        }
        updatePfmRemark(data).then(response =>{
          row.platformRemark=value //回显数据

          this.$message({
            type: 'success',
            message: '操作成功'/* + value*/
          });
        })

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入'
        });
      });

    },
    handleClose(row){
      this.$confirm('确认关闭工单 '+row.pkId+" ?")
          .then(_ => {
            let data={"orderId":row.pkId};
            closeWkOrderByOrderId(row.pkId).then(response =>{
              this.$alert("操作成功");
              this.getList();
            })
          })
          .catch(_ => {});
    },


    // 更多操作触发
    handleCommand(command, row) {
      switch (command) {
        case "openSelectWorker":
          this.openSelectWorker(row);
          break;
        case "handleUpdate":
          this.handleUpdate(row);
          break;
        case "handleItem":
          this.handleItem(row);
          break;
        case "handlePfmRemark":
          this.handlePfmRemark(row);
          break;
        case "handleClose":
          this.handleClose(row);
          break;
        default:
          break;
      }
    },

    openSelectWorker(row) {
      this.$confirm('确定要给【'+row.workStatusName+'】的工单【'+row.pkId+"】安排师傅吗 ?")
          .then(_ => {
            this.$refs.select.bizId=row.pkId;
            this.$refs.select.show();
          })
          .catch(_ => {});
    },

    handleFromClickProj(obj){
      this.form.projName=obj.projName;
    },
    handleFromClickPdr(obj){
      this.form.producerName=obj.companyName;
      this.form.producerId=obj.pkId;
    },
    handleFromChangeCate(value){
      console.log(this.cateOptions);
      if(value){
        this.form.cateCode=value[0]
        this.form.cateItemCode=value[1]
        this.$nextTick(() => {
          let arrLabel = this.$refs["fromCateOptions"].presentText.split(
              this.$refs["fromCateOptions"].separator
          );

          this.form.cateName=arrLabel[0]
          this.form.cateItemName=arrLabel[1]


          for(let index in this.cateOptions){
            let cate=this.cateOptions[index]
            if(cate.value == value[0]){
              for(let i in cate.children){
                let item=cate.children[i]
                if(item.value==value[1]){
                  this.form.prodImg=item.img
                  break;
                }
              }
              break;
            }
          }

        });
      }
    },

    handleChangeProjAry(value){
      if(!!value && value.length>0){
        this.form.projCode=value[0]
        this.form.cateCode=value[1]
        this.form.cateItemCode=value[2]

        //通过搜索 选择 此处获取不到值
        //let arr = this.$refs['fromDistrictOptions'].getCheckedNodes()[0].pathLabels
        //let nodesInfo = this.$refs['fromDistrictOptions'].getCheckedNodes();

        //当使用getCheckedNodes()方法获取不到节点时,我们可以使用反查的方法getNodeByValue(),去找当前节点
        let nodesInfo=this.$refs[`fromProjOptions`].panel.getNodeByValue(value)
        let lableArr=nodesInfo.pathLabels;
        this.form.projName=lableArr[0]?lableArr[0]:undefined;
        this.form.cateName=lableArr[1]?lableArr[1]:undefined;
        this.form.cateItemName=lableArr[2]?lableArr[2]:undefined;

        for(let p in this.projOptions){
          let proj=this.projOptions[p]
          if(proj.value == value[0]){
            for(let c in proj.children){
              let cate=proj.children[c]
              if(cate.value==value[1]){
                for(let i in cate.children){
                  let item=cate.children[i]
                  if(item.value==value[2]){
                    this.form.prodImg=item.img
                    this.form.workPrice=item.price
                    this.form.prodNum=1
                    this.projItemPrice=item.price
                    break;
                  }
                }
              }
            }
          }
        }

        //此方法也可以
        /*this.$nextTick(() => {
          let arrLabel = this.$refs["fromDistrictOptions"].presentText.split(
              this.$refs["fromDistrictOptions"].separator
          );

          this.form.province=arrLabel[0]
          this.form.city=arrLabel[1]
          this.form.district=arrLabel[2]
        });*/

      }else{
        this.form.projCode=undefined
        this.form.cateCode=undefined
        this.form.cateItemCode=undefined
        this.form.projName=undefined
        this.form.cateName=undefined
        this.form.cateItemName=undefined
        this.projItemPrice=undefined
        this.refreshProjCateItem++;
      }

    },
    handleChangeProdNum(){
      debugger;
      if(!this.projItemPrice){
        this.projItemPrice=0;
      }
      if(!this.form.prodNum){
        this.form.prodNum=0;
      }
      this.form.workPrice=this.form.prodNum*this.projItemPrice;
    },
    handleFromChangeDistrict(value){
      if(value && value.length>0){
        //通过搜索 选择 此处获取不到值
        //let arr = this.$refs['fromDistrictOptions'].getCheckedNodes()[0].pathLabels

        this.form.cusProvinceCode=value[0]
        this.form.cusCityCode=value[1]
        this.form.cusDistrictCode=value[2]

        this.$nextTick(() => {
          let arrLabel = this.$refs["fromDistrictOptions"].presentText.split(
              this.$refs["fromDistrictOptions"].separator
          );

          this.form.cusProvince=arrLabel[0]
          this.form.cusCity=arrLabel[1]
          this.form.cusDistrict=arrLabel[2]
        });

      }else{
        this.form.cusProvinceCode=undefined
        this.form.cusCityCode=undefined
        this.form.cusDistrictCode=undefined
        this.form.cusProvince=undefined
        this.form.cusCity=undefined
        this.form.cusDistrict=undefined
        this.refreshDistrict++
      }
    },

    handleExceed(files, fileList) {
      this.$message.warning(`当前限制最多上传一张图片`)
    },
    beforeAvatarUpload(file) {
      let isJPG = false
      let isLt10M = file.size / 1024 / 1024 < 10
      if (
          file.type === 'image/jpeg' ||
          file.type === 'image/png' ||
          file.type === 'image/jpg'
      ) {
        isJPG = true
      } else {
        isJPG = false
      }
      if (!isJPG) {
        this.$message.error('上传图片只能是 jpg/jpeg/png 格式!')
      }
      if (!isLt10M) {
        this.$message.error('上传图片大小不能超过 10M!')
      }
      return isJPG && isLt10M
    },
    handleSuccessImg(response, file, fileList) {
      this.imageUploading=false;
      if (response.code === 200) {
        this.form.prodImg =response.data.url;
      } else {
        this.$message.error('上传失败，请重试');
        this.form.prodImg  = undefined;
      }
    },
    handleProcessImg(event, file, fileList) {    //注意在data中添加对应的变量名
      this.imageUploading = true
      this.imageUploadPercent = file.percentage.toFixed(0) * 1
    },
    handleRemove(file, fileList) {
      this.form.prodImg = undefined;
    },

  }
};
</script>
<style lang="scss" scoped>

  /***上传**/
  ::v-deep.thmb-uploader .el-upload {
    border: 1px dashed #D9D9D9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  ::v-deep.thmb-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .thmb-img {
    width: 100px;
    height: 100px;
    display: block;
  }

  .thmb-uploader:hover .el-icon-circle-close {
    visibility: visible;
  }
  .el-icon-circle-close {
    /*display: flex;
    float: right;
    margin-right: 6px;*/
    right: 2px;
    color: #959bcb;
    font-size: 30px;
    visibility: hidden;
    position: absolute;
    z-index: 99;
  }
  .thmb-img-progress{
    left: 0px;
    //right: 0px;
    //bottom:0px;
    //top:0px;
    position: absolute;
  }
  .thmb-uploader-icon {
    font-size: 28px;
    color: #8C939D;
    width: 100px;
    height: 100px;
    line-height: 108px;
    text-align: center;
  }

</style>
